/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Form, Input, Button, Select } from 'antd';
import type { ConnectState } from '@/models/connect';
import { connect } from 'umi';
import type { DeliverySearchIndexType } from '../types/DeliverySearch';
import { DeliverListColumns } from './utils';
import CommonTable from './_common/CommonTable';
import CommonResetButton from './_common/CommonResetButton';
const FormItem = Form.Item;
const { Option } = Select;

interface FormType {
  type: string;
  username: string;
}

const selectOptions = [
  {
    label: '中通',
    value: 'zt',
  },
  {
    label: '申通',
    value: 'sto',
  },
];

const DeliverySearch = (props: DeliverySearchIndexType) => {
  const { screenSize, dispatch, deliverList } = props;
  const [form] = Form.useForm();

  const onFinish = (values: FormType) => {
    dispatch({
      type: 'customerSearch/getDeliveryList',
      payload: { ...values },
    });
  };
  const onReset = () => {
    form.resetFields();
    dispatch({
      type: 'customerSearch/save',
      payload: { deliverList: [{ id: '1' }] },
    });
  };

  return (
    <>
      <Form
        form={form}
        onFinish={onFinish}
        layout={screenSize ? 'vertical' : 'inline'}
        style={{ marginBottom: 20 }}
      >
        <FormItem label={'品牌'} name='brand' initialValue={'sto'}>
          <Select style={{ width: 200 }}>
            {selectOptions.map((item) => (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          label={'手机号'}
          name='username'
          rules={[{ required: true, message: '请输入手机号' }]}
        >
          <Input allowClear style={{ width: 200 }} placeholder={'请输入手机号'} />
        </FormItem>
        <FormItem>
          <Button type='primary' htmlType='submit' loading={false}>
            查询
          </Button>
          <CommonResetButton onReset={onReset} />
        </FormItem>
      </Form>
      <CommonTable title='基础信息' columns={DeliverListColumns} datasource={deliverList} />
    </>
  );
};

export default connect(({ customerSearch, loading }: ConnectState) => ({
  deliverList: customerSearch.deliverList || [{ id: '1' }],
  tableLoading: loading.effects['customerSearch/getDeliveryList'] || false,
}))(React.memo(DeliverySearch));
